<template>
	<view>

        <button @click="open()">免费咨询</button>
        <uni-popup ref="popup" type="center">
            <view class="content">
                <view class="zxs-intr-v3">
                    
                    <view @click="close()" class="shut"></view>

                    <view class="zxs-pic">
                        <img src="../../static/img00/care.png" alt="">
                    </view>

                    <view class="zxs-txt">
                        <h5>唐非凡</h5>
                        <p>已为<span>1436</span>人解答过问题</p>
                    </view>

                    <view class="text">
                        <p class="text-p1">买房政策、房源信息、楼盘分析1241556</p>
                        <p>有问题，他将在第一时间为您解答！ </p>
                    </view>

                     <view class="phone">
                        <input  type="text" placeholder="请输入订阅手机号">
                    </view>

                    <button class="btn-area"  @click="expert">确定</button>
                </view>


            </view>   
        </uni-popup> 

        <uni-popup ref="message" type="center">
            <view class="expert2-popup">
                <p class="expert2-popup-p">请输入正确格式的手机号</p>
                <p @click="close1()" class="expert2-popup-shut">取消</p>
            </view>
        </uni-popup>

      
        
	</view>
</template>


<script>
    import uniPopup from '@/components/uni-popup/uni-popup.vue'
    import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
    import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
        components: {
            uniPopup,
            uniPopupMessage,
            uniPopupDialog,
        },

		data() {
            
			return {
				
			}
		},
		methods: {

			open(){
                this.$refs.popup.open()
            },
            close(){
                 this.$refs.popup.close()
            },
            expert(){
                this.$refs.message.open()
            },
            close1(){
                this.$refs.message.close()
            }
		}
	}
</script>

<style scoped>
 .shut{
        height: 32upx;
        width: 32upx;
        position: relative;
        top:-30upx;
        left: 560upx;
        background: url("../../static/img00/shut.png") no-repeat;
        background-size: 100% 100%;
    }
 .content{  

        background: #fff;
        border-radius: 10upx;
        display: flex;
    } 

    .zxs-intr-v3{
        padding: 50upx 60upx 50upx 60upx;
        margin: 0 auto;

    }
    .zxs-pic{
        height: 120upx;
        width: 120upx;  
        float: left;
    }
    .zxs-pic>img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }

    .zxs-txt{
        height: 120upx;
        margin-left: 140upx;
        line-height: 60upx;
       
    }
    .zxs-txt>h5{
        font-size: 32upx;
    }
    .zxs-txt>p{
        font-size: 28upx;
        color: #77808a;
    }
    .zxs-txt>p>span{
        color: #13c3c3;
    }
    .text{
        margin-top: 50upx;
        margin-bottom: 80upx;
    }
    .text>p{
        width: 500upx;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .text-p1{
        margin-left: 20upx;
        margin-right: 40upx;
    }


     .phone{
        border: 1upx solid #cdd7e1;
        border-radius: 10upx;
    }
    .phone>input{
        padding: 0 30upx;
    }
    input{
        height: 86upx;
    }


      .btn-area{
        margin-top: 80upx;
        margin-bottom: 30upx;
        background: #13c3c3;
        color: #fff;
    }
 .expert2-popup{
        width: 510upx;
        height: 240upx;
        background: #fff;
        border-radius: 10upx;
    }
    .expert2-popup-p{
        height: 150upx;
        text-align: center;
        font-size: 28uxp;
        color: #3e4a59;
        line-height: 150upx;
        border-bottom: 1upx solid rgb(195, 195, 195);
    }
    .expert2-popup-shut{
        text-align: center;
        line-height: 90upx;
        color: #47b3e3;
    }
</style>
